{extend name="common/menu_child" /}

{block name="nav"}
<span class="layui-breadcrumb">
	<a>资源回收</a>
	<a href="{:url('index')}">物品及价格</a>
	<a><cite>添加</cite></a>
</span>
{/block}

{block name="body"}
<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="x-red">*</span>标题</label>
		<div class="layui-input-inline">
			<input type="text" name="name" lay-verify="required" maxlength="8" placeholder="20位长度以内" autocomplete="off" class="layui-input" />
		</div>
		<div class="layui-form-mid layui-word-aux">定义物品的名称</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="x-red">*</span>图片</label>
		<div class="layui-input-inline" style="width:400px;">
			<p style="padding:9px 0px 9px 0px;color:#999;">上传一张尺寸为 {$recycle_cargo.width} x {$recycle_cargo.height} 的图片，大小不超过{$recycle_cargo.size}KB</p>
			<div>
				<a title="recycle_cargo" href="javascript:void(0);" style="display:inline-block;padding:11px 15px;float:left;border:1px solid #ccc;">+</a>
				<templet title="recycle_cargo" style="display:none;">
					<div style="display:inline-block;width:38px;height:38px;float:left;border:1px solid #ccc;margin-left:2px;">
						<image width="100%" height="100%" src="" />
					</div>
				</templet>
				<content title="recycle_cargo"></content>
				<input title="recycle_cargo" name="image" style="display:none;" value="" />
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="x-red">*</span>排序</label>
		<div class="layui-input-inline">
			<input type="text" name="sort" lay-verify="required" maxlength="2" placeholder="2位长度以内" autocomplete="off" class="layui-input" />
		</div>
		<div class="layui-form-mid layui-word-aux">依照此序号进行先后顺序</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<button  class="layui-btn" lay-filter="save" lay-submit>保存</button>
	</div>
</form>
{/block}

{block name="javascript"}
<script type="text/javascript">

	layui.use(['form', 'layer', 'upload'], function(){
		
		layui.upload.render({
			auto: false,
			elem: 'a[title=recycle_cargo]',
			exts: '{$recycle_cargo.type}',
			size: {$recycle_cargo.size},
			multiple: false,
			number: 1,
			drag: false,
			choose: function(obj){
				obj.preview(function(index, file, result){
					
					/** 更新图像参数 */
					let input = $('input[title=recycle_cargo]');
					let image = undefined;
					if(0 === input.val().length){
						image = new Array();
					}else{
						image = input.val().split('-');
					};
					image.push(result);
					$(input).val(image.join('-'));
					
					/** 使用图像参数 调取模板更新图像DOM */
					let templet = $('templet[title=recycle_cargo]').children().clone();
					let content = $('content[title=recycle_cargo]');
					content.children().remove();	/** 清除图像 */
					for(let i = 0; i < image.length; i++){
						let templet_clone = $(templet).clone();
						$(templet_clone).children('img').attr('src', image[i]);
						content.append(templet_clone);
					};
					$('a[title=recycle_cargo]').hide();	/** 隐藏新增按钮 */
					
				});
			}
		});
		
		layui.form.verify({
			price: function(value) {
				if(false === /^\d+(\.\d{1,2})?$/.test(value)){
					return '单价必须为数字且小数点后最多两位';
				};
			},
			sort: function(value) {
				if(false === /^[0-9]{1,2}$/.test(value)){
					return '排序必须为数字且最大不超过两位数';
				};
			}
		});
		
		layui.form.on('submit(save)', function(e){
			
			let data = {
				name: e.field.name,
				image: e.field.image,
				sort: parseInt(e.field.sort),
			};
			if(0 === data.image.length){
				layer.msg('请选择一张图片');
				return false;
			};
			console.log(data);
			
			action_post_json('', data, function(response){
				layer.msg(response.message);
				switch(response.errno){
					case 0 :
						setTimeout(function(){
							window.location.href='{:url("index")}';
						}, 1000);
						break;
				};
			});
		
			return false;
		});
	});
	
	
</script>
{/block}